/*
 * @Description: []
 * @Author: Iseven Monkey <iswoter@gmail.com>
 * @Date: 2023-10-28 06:34:33
 * @LastEditors: Iseven Monkey <iswoter@gmail.com>
 * @LastEditTime: 2023-11-04 20:41:28
 */
// 栅格

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -$padding * 0.5;
  margin-right: -$padding * 0.5;
}
.row.no-wrap {
  flex-wrap: nowrap;
}

[class^="col-"] {
  position: relative;
  width: 100%;
  padding-left: $padding * 0.5;
  padding-right: $padding * 0.5;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  padding-left: $padding * 0.5;
  padding-right: $padding * 0.5;
}

.col-1 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-2 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-3 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-4 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-5 {
  flex: 0 0 20%;
  max-width: 20%;
}

.col-6 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-7 {
  flex: 0 0 14.285714%;
  max-width: 14.285714%;
}

.col-8 {
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.col-9 {
  flex: 0 0 11.111111%;
  max-width: 11.111111%;
}

.col-10 {
  flex: 0 0 10%;
  max-width: 10%;
}

// grid

.grid {
  display: grid;
  grid-gap: 10rpx 10rpx;

  &-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  &-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  &-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  &-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  &-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  &-item {
  }

  &.gutter-10 {
    grid-gap: 10rpx 10rpx;
  }
  &.gutter-20 {
    grid-gap: 20rpx 20rpx;
  }
  &.gutter-30 {
    grid-gap: 30rpx 30rpx;
  }
  &.gutter-40 {
    grid-gap: 40rpx 40rpx;
  }
  &.gutter-50 {
    grid-gap: 50rpx 50rpx;
  }
}
